<template>
  <div
    class="butt-list-sty"
    :style="{ paddingLeft: queryAllListFlag ? '200px' : '' }"
  >
    <el-input placeholder="请输入作业名称" v-model="keyWord" @change="goSearch" v-show="queryAllListFlag">
    </el-input>
    <div
      v-for="(item, index) in newList"
      :key="index"
      class="basebut"
      :class="{ 'active': index === selectedindex }"
      @click="selbut(item, index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import classificat from "@/api/digital-production/agricultural-work-management/agricultural-work-classification";
export default {
  data() {
    return {
      selectedindex: 0,
      keyWord: "",
      flag: false,
      buttonselectlist: [],
      newList: [],
      queryAllListFlag: false
    };
  },
  created() {
    this.getList()
  },
  mounted() {
    // this.selbut(0);
  },
  methods: {
    selbut(item, i) {
      this.selectedindex = i;
      this.$emit("nowselectbuttonindex", item);
    },
    getList() {
      // if (getToken("parentId")) {
      //   let zhurl =
      //     this.$baseurl.webServiceUrl +
      //     "productionv2/agriculturalWorkType/queryByCondition";
      //   let neworglist =
      //     getToken("organizationList") + "," + getToken("parentId");
      //   axios({
      //     headers: {
      //       sysDataBaseName: sessionStorage.databaseName,
      //       accessToken: getToken("token"),
      //       systemMark: "MC",
      //       databaseName: getToken("databaseName"),
      //       organizationList: neworglist,
      //       organizationNo: getToken("organizationNo"),
      //     },
      //     data: {
      //       farmingTypeNo: getToken("farmingTypeNo"),
      //     },
      //     method: "post",
      //     url: zhurl,
      //   }).then((res) => {
      //     let data = res.data;
      //     data.forEach((el) => {
      //       el["name"] = el.agriculturalWorkTypeName;
      //     });
      //     this.buttonselectlist = data
      //     this.newList = data
      //     if(this.buttonselectlist.length>40) {
      //       this.queryAllListFlag = true
      //     }
      //   });
      // } else {
        classificat.getqueryAllList().then((res) => {
          let data = res.data;
          data.forEach((el) => {
            el["name"] = el.agriculturalWorkTypeName;
          });
          this.buttonselectlist = data
          // this.newList = data
          this.queryAllDataType()
          // if(this.buttonselectlist.length>40) {
          //   this.queryAllListFlag = true
          // }
        });
      // }
    },
    async queryAllDataType () {
      let params = {
        page: this.currentPagetwo,
        size: this.pageSizetwo,
        entity: {
          businessType: 'AGRICULTURE_WORK_TYPE',

        }
      };
      const { data: res } = await axios({
        method: "post",
        url: this.$baseurl.webServiceUrl + 'v3/config/serviceClass/queryByCondition',
        headers: {
          databaseName: 'DB_TDW1_PUBLIC'
        },
        data: params
      })
      let list = res.data, newList = []
      this.buttonselectlist.map(el => {
        let row = list.find(ele => { return ele.svcClassCode == el.agriculturalWorkTypeNo })
        if (row) {
          el.svcData = { ...row }
          newList.push(el)
        }
      })
      this.newList = newList
      this.selbut(this.newList[0], 0);
    },
    goSearch(e) {
      this.newList = this.buttonselectlist.filter(el=>{
        return el.name.includes(e)
      })
      this.$emit('updateQueryAllList',this.newList)
      if(this.newList.length>0) {
        this.selbut(this.newList[0], 0)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.butt-list-sty {
  position: relative;
  // min-width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}
.basebut {
  display: inline-block;
  word-wrap: break-word;
  width: auto;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #106986;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  margin: 3px 5px;
  padding: 0 10px;
  &.active {
    background-image: linear-gradient(#0fa1d2, #1087af, #106f8f);
    border: #f6f9f9 1px solid;
  }
}

::v-deep .el-input {
  position: absolute;
  width: 200px !important;
  height: 30px !important;
  left: 0;
}
</style>
